<template>
  <view class="container">
    <cu-custom bgColor="bg-purple" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">消息通知详情</block>
    </cu-custom>

    <view class="bg-top bg-purple">
      <view class="top-box shadow">
        <view class="qh-title text-bold text-blue text u-text-center">
          <input v-model="message.title" disabled name="input" />
        </view>

        <view class="cu-list menu">
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-newshotfill text-mauve margin-right-xs"></text>
              <text class="text-black">类型</text>
            </view>
            <view class="action">
              <view class="cu-tag round bg-mauve light">{{ message.typeName }}</view>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-newshotfill text-cyan margin-right-xs"></text>
              <text class="text-black">内容</text>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="action">
              <view
                class="text text-black u-m-l-60"
                style="width: 550rpx; word-break: break-all"
                v-html="message.content"
              ></view>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-timefill text-orange margin-right-xs"></text>
              <text class="text-black">记录时间</text>
            </view>
            <view class="action">
              <view class="cu-tag round bg-orange light">{{ message.createTime }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: {}
    }
  },
  async onLoad(option) {
    this.getDetail(option.id)
  },
  methods: {
    async getDetail(id) {
      const res = await this.$u.api.getMessageDetail(id)
      this.message = res
      uni.$emit('refreshPage')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  color: #333333;

  .bg-top {
    margin-top: -1rpx;
    width: 750rpx;
    height: 220rpx;
    padding-top: 50rpx;
    border-radius: 0 0 20% 20%;

    .top-box {
      width: 700rpx;
      background-color: #ffffff;
      margin: 0 auto;
      border-radius: 20rpx;
      padding: 20rpx 30rpx 0rpx;
      position: relative;

      .qh-title {
        width: 100%;
        height: 60rpx;
        line-height: 65rpx;
      }
    }
  }
}

.category-subsection {
  width: 250rpx;
}

.input-width-220 {
  width: 220rpx;
}

.url-link {
  margin: 0 auto;
  width: 750rpx;
}
</style>
